<template>
  <div>
    <el-dialog :visible.sync="dialogVisible" v-bind="$attrs" v-on="$listeners" class="gyc-dialog" v-dragH v-dragW
      v-dragM @close="closeWin()">
      <template #title v-if="$scopedSlots.title">
        <slot name="title" :title="$attrs.title">
          {{ $attrs.title }}
        </slot>
      </template>
      <template #default>
        <div id="opendiv">
          <slot> </slot>
        </div>

      </template>
      <template #footer class="dialog-footer" v-if="$scopedSlots.footer">
        <slot name="footer">
          <el-button @click="closeWin()">取 消</el-button>
          <el-button type="primary" @click="save()">确 定</el-button>
        </slot>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import vue from "vue";
import router from "@/router";
import dragM from "../directive/dialog/drag";
import dragW from "../directive/dialog/dragWidth";
import dragH from "../directive/dialog/dragHeight";
export default {
  props: ["url"],
  name: "GModel",
  directives: {
    dragW: dragW,
    dragH: dragH,
    dragM: dragM,
  },
  data() {
    return {
      dialogVisible: true,
    };
  },
  methods: {
    save() {
      this.$emit("save", (result = true, callback) => {
        if (typeof result != "boolean" && typeof result != "string") {
          this.$message.warning("第一个参数必须是布尔类型或字符串！");
          return;
        }
        if (callback && typeof callback !== "function") {
          this.$message.warning("第二个参数必须是一个方法！");
          return;
        }
        if (result === true) {
          if (callback) {
            callback();
          } else {
            this.closeWin();
          }
        } else {
          if (callback) {
            callback();
          } else {
            this.$message.warning(result);
          }
        }
      }, this);
    },
    closeWin() {
      this.$emit("uclose", this);
    },
  },
  async mounted() {
    let uurl = this.url;
    try {
      if (uurl) {
        console.log(`/src/${uurl}.vue`);
        require([`/src/${uurl}.vue`], (result) => {
          new vue({
            render: (h) => h(result.default),
            router,
          }).$mount("#opendiv");
        });
      }
    } catch (error) {
      console.log(error);
    }
  },
};
</script>

<style>
.gyc-dialog .el-dialog__headerbtn {
  top: 10px;
}

.gyc-dialog .el-dialog__body {
  padding: 0 !important;
}
</style>